<!--step2页面选择功能组件-->
<template>
    <div :class="{'card':true,'selected':info.checked}" :info="info" @click="choose">
        <el-image v-show="info.checked" class="iconCheck"
                  :src="info.serviceIcon==undefined?icon:info.activeIcon">
        </el-image>
        <el-image  v-show="!info.checked" class="icon"
                   :src="info.activeIcon==undefined?icon:info.serviceIcon">
        </el-image>
        <el-image :class="{'passImg':true,'passCheck':info.checked}" :src="checkIcon"
                  v-show="info.status==2"></el-image>
        <el-image :class="{'failImg':true,'failCheck':info.checked}" :src="failIcon"
                  v-show="info.status==3"></el-image>
        <div :class="{'title':true,'selectedTitle':info.checked}">{{info.serviceName}}</div>
        <div :class="{'passMsg':true,'pass':info.status==2,'fail':info.status==3}">
            {{info.status==2?('Pass at'+forMateTime(info.passDate)):info.status==3?('Re-Open at '+forMateTime(info.reopenDate)):""}}</div>
    </div>
</template>

<script>
    import Icon from '../assets/step3.png'
    import checkIcon from '../assets/Relevant/check_icon.png'
    import failIcon from '../assets/Relevant/fail.png'
    export default {
        name: "AsCheckBox",
        props:{
            info:{
                type:Object,
                default:function () {
                    return{
                        icon:Icon,
                        title:'Title',
                        checked:false,
                        checkedIcon:Icon
                    }
                }
            }
        },
        data(){
            return{
                icon:Icon,
                checkIcon:checkIcon,
                failIcon:failIcon
            }
        },
        created() {
            console.log('checkBox',this.info)
        },
        methods:{
            choose(){
                this.$emit('handleSelect',this.info.serviceId)
            }
        }
    }
</script>

<style scoped>
    .card{
        cursor:pointer;
        display: inline-table;
        width: 27%;
        height: 150px;
        border-radius: 10px;
        text-align: center;
        background: white;
        border: 2px solid #eaebeb;
        position: relative;
        box-sizing: border-box;
        margin-top: 20px;
        margin-right: 18px;
    }
    .passMsg{
        font-size: 12px;
        margin-top: 5px;
    }
    .pass{
        color: green;
    }
    .fail{
        color: red;
    }
    .selected{
        border: 4px solid #2dc3e3;
    }
    .selectedTitle{
        color: #2dc3e3!important;
    }
    /*中间图片样式*/
    .icon{
        width: 56px;
        height: 56px;
        margin-top:30px
    }
    .iconCheck{
        width: 56px;
        height: 56px;
        margin-top:28px
    }
    .passImg{
        width: 30px;
        height: auto;
        position: absolute;
        top:10px;
        right:10px
    }
    .passCheck{
        top:8px;
        right:8px
    }
    .failImg{
        width: 26px;
        height: auto;
        position: absolute;
        top:14px;
        right:14px
    }
    .failCheck{
        top:12px;
        right:12px
    }
    .title{
        width:60%;
        margin:10px auto 0;
        font-weight: bold;
        font-size: 20px;
        color: #6b7382
    }
    @media screen and (max-width: 1600px) {
    }
    @media screen and (max-width: 1440px) {
        .card{
            height: 120px;
            width: 27%;
            margin-top: 10px;
        }
        .icon{
            margin-top: 10px;
        }
        .iconCheck{
            margin-top: 8px;
        }
        .title{
            font-size: 16px;
            margin-top: -10px;
        }
        .passMsg{
            margin-top: 0px;
        }
    }
    @media screen and (max-width: 1200px) {
        .card{
            height: 110px;
            margin-top: 10px;
            margin-right: 10px;
        }
        .title{
            font-size: 12px;
            width: 120px;
            margin-top: 0px;
        }
        .selected{
            border: 4px solid #2dc3e3;
        }
        .passImg{
            width: 25px;
            height: 25px;
        }
        .passCheck{
            top:8px;
            right: 8px;
        }
        .failImg{
            width: 20px;
            height: 20px;
        }
        .failCheck{
            top:12px;
            right: 12px;
        }
        /*中间选中时候的图片样式*/
        .iconCheck{
            width: 35px;
            height: 35px;
            margin-top:18px
        }
        /*中间未选中时候的图片样式*/
        .icon{
            width: 35px;
            height: 35px;
            margin-top:20px
        }
        .passMsg{
            transform: scale(0.85);
            margin-top: 0px;
        }
    }
</style>